.main {
  @apply w-screen h-screen overflow-hidden flex flex-col;
  min-width: 1200px;
  scroll-behavior: smooth;
  .head {
    @apply bg-bg flex justify-between items-center;
    padding: 0 54px;
    height: 60px;
    .logo {
      height: 30px;
    }
    .navAthor {
      @apply text-white-80;
      font-family: Alibaba PuHuiTi 2;
      margin-left: 50px;
      &:hover {
        @apply text-theme;
      }
    }
    .btn {
      @apply bg-theme w-20 h-8 ml-8;
    }
  }
  .content {
    @apply w-full flex-1 overflow-y-auto;
    scroll-behavior: smooth;
    .step1 {
      @apply w-full flex flex-col items-center justify-center;
      height: 36.46vw;
      background-image: url('/images/step1.webp');
      background-size: 100% 100%;
      .step1Img {
        height: 64px;
      }
      .step1Text {
        @apply text-white font-medium text-xl leading-10 text-center mt-5;
        font-family: Source Han Sans;
        width: 740px;
        margin-bottom: 84px;
      }
      .btnGroup {
        @apply flex h-9;
        .btn {
          @apply h-9 bg-theme;
          width: 164px;
          &.btnJoin {
            @apply ml-8;
            background-color: rgba(255, 255, 255, 0.2);
          }
        }
      }
    }
    .step2 {
      @apply text-black text-center;
      font-family: Source Han Sans;
      padding-bottom: 45px;
      .howto {
        @apply font-bold italic;
        font-size: 22px;
        margin-bottom: 18px;
      }
      .howtoText {
        @apply text-sm  mb-8;
        line-height: 14px;
      }
      .img {
        @apply inline-block;
        height: 225px;
      }
    }
    .step3 {
      @apply text-black text-center;
      font-family: Source Han Sans;
      padding-top: 36px;
      padding-bottom: 60px;
      background: #f8f9ff;
      .howto {
        @apply font-bold italic;
        font-size: 22px;
        margin-bottom: 18px;
      }
      .qaBox {
        @apply inline-flex flex-wrap;
        width: 940px;
        .qaItem {
          @apply bg-white rounded-2xl mb-10 flex text-left;
          width: 435px;
          height: 118px;
          padding: 18px;
          &:nth-child(2n) {
            @apply ml-10;
          }
          .img {
            @apply mr-1;
            width: 22px;
            height: 22px;
          }
          .qaRight {
            @apply flex-1;
            .qaTitle {
              @apply text-black font-semibold text-base leading-4 mt-1;
              margin-bottom: 10px;
            }
            .qaDesc {
              @apply text-xs;
              font-family: Source Han Sans;
              color: #666666;
            }
          }
        }
      }
    }
    .step4 {
      @apply bg-bg text-center text-white;
      padding-top: 38px;
      padding-bottom: 50px;
      font-family: Source Han Sans;
      .callus {
        font-size: 22px;
      }
      .callTips {
        @apply text-sm;
        margin-top: 10px;
        margin-bottom: 45px;
      }
      .callGroup {
        @apply inline-flex flex-wrap justify-center;
        width: 1200px;
        .contactBox {
          @apply cursor-pointer rounded flex items-center justify-center;
          background: #343434;
          width: 254px;
          height: 34px;
          img {
            @apply w-4 h-4 mr-1;
          }
          &:not(:last-child) {
            margin-right: 22px;
          }
          span {
            @apply text-white-80 text-sm;
            font-family: PingFang SC;
          }
        }
      }
    }
  }
}
